<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google" value="notranslate">

  <title>Double Navbar</title>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->

  <!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->
  <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-ios.min.css" rel="stylesheet"> -->
   <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-desktop.min.css" rel="stylesheet">
  <!--<link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-android.min.css" rel="stylesheet">-->

  <!-- Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

</head>

<body class="has-bootcards-navbar-double">

  <!-- fixed top navbar -->
  <div class="navbar navbar-default navbar-fixed-top bootcards-navbar-double" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
    
      <a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>  

      <!--navbar menu options: shown on desktop only -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right bootcards-nav-secondary">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" aria-expanded="false">
              <i class="fa fa-globe"></i>
              Languages <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Deutsch</a></li>
              <li><a href="#"><i class="fa fa-fw fa-check pull-right"></i>English</a></li>
              <li><a href="#">Espanol</a></li>
            </ul>
          </li>    
          <li>
            <a href="#">
              <i class="fa fa-fw fa-question-circle"></i>
              Help
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-fw fa-lock"></i>
              Login
            </a>
          </li>    
        </ul>
        <ul class="nav navbar-nav navbar-right bootcards-nav-primary">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <i class="fa fa-fw fa-dashboard"></i>
              Home <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i> Action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-film"></i> Another action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-file-o"></i> Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Separated link</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <i class="fa fa-fw fa-files-o"></i>
              Pages
            <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i> Action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-film"></i> Another action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-file-o"></i> Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Separated link</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <i class="fa fa-fw fa-gears"></i>
              Features <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i> Action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-film"></i> Another action</a></li>
              <li><a href="#"><i class="fa fa-fw fa-file-o"></i> Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Separated link</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-fw fa-briefcase"></i>
              Portfolio
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-fw fa-bullhorn"></i>
              Blog
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-fw fa-users"></i>
              Contacts
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-search"></i>
            </a>
          </li>
        </ul>
      </div><!--navbar-->    
    </div>
  </div>   


  <div class="container bootcards-container push-right">

    <!-- This is where you come in... -->
    <!-- I've added some sample data below so you can get a feel for the required markup -->

    <div class="row">

      <!-- left list column -->
      <div class="col-sm-5 bootcards-list" id="list" data-title="Contacts">
        <div class="panel panel-default">       
          <div class="panel-body">
            <div class="search-form">
              <div class="row">
                <div class="col-xs-9">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search Contacts...">
                    <i class="fa fa-search"></i>
                  </div>
                </div>
                <div class="col-xs-3">
                  <a class="btn btn-primary btn-block" href="#" onclick="bootcards.hideOffCanvasMenu()" >
                    <i class="fa fa-plus"></i> 
                    <span>Add</span>
                  </a>
                </div>
              </div>                
            </div>          
          </div><!--panel body-->

          <div class="list-group">

            <!-- list of sample data -->

            <a class="list-group-item" href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item active" href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Bess, Jerry</h4>
              <p class="list-group-item-text">ZetaComm</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Biddy, Jamie</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Bess, Jerry</h4>
              <p class="list-group-item-text">ZetaComm</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Biddy, Jamie</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Bess, Jerry</h4>
              <p class="list-group-item-text">ZetaComm</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Biddy, Jamie</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>
            
          </div><!--list-group-->

          <div class="panel-footer">
            <small class="pull-left">Built with Bootcards - List</small>
            <a class="btn btn-link btn-xs pull-right" href="#">
              Footer link</a>
          </div>
        </div><!--panel-->

        </div><!--list-->

        <!--list details column-->
        <div class="col-sm-7 bootcards-cards hidden-xs">

          <div class="panel panel-default bootcards-richtext">
            <div class="panel-heading">
              <h3 class="panel-title">About this page</h3>
            </div>
            <div class="panel-body">
              <p>This page shows you how to create a master/detail view using Bootcards. Main features:</p>
              <ul>
                <li>Markup based on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3+</a>.</li>
                <li>Near-native iOS look (there's one for Android and Desktop too).</li>
                <li>Fixed header and footer</li>
                <li>Independent scrolling columns.</li>
                <li>Automatic single pane portrait mode (similar to the iOS Mail app): make sure you also view this page using a tablet and rotate to portrait.</li>
                <li>Off-canvas menu. On this page it is configured to push the main content away, it can also be configured as an overlay.</li>
              </ul>
              <p>
              This is only a sample page: it is not meant to be fully functional. We've used <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> for the icons and have include FTLabs' <a href="https://github.com/ftlabs/fastclick" target="_blank">FastClick</a> library to make tapping links on iOS faster.
              </p>
            </div>
            <div class="panel-footer">
              <small>Built with Bootcards - Rich Text Card</small>
            </div>
          </div><!--end rich text card--> 

          <!--contact details -->
          <div id="contactCard">

            <div class="panel panel-default">
              <div class="panel-heading clearfix">
                <h3 class="panel-title pull-left">Contact Details</h3>
                <div class="btn-group pull-right visible-xs">
                  <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#editModal">
                    <i class="fa fa-pencil"></i><span>Edit</span>
                  </a>
                </div>  
                <a class="btn btn-primary pull-right hidden-xs" href="#" data-toggle="modal" data-target="#editModal">
                  <i class="fa fa-pencil"></i><span>Edit</span>
                </a>
              </div>
              <div class="list-group">
                <div class="list-group-item">
                  <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
                  <label>Name</label>
                  <h4 class="list-group-item-heading">Acey, Sofia</h4>
                </div>

                <div class="list-group-item">
                  <label>Company</label>
                  <h4 class="list-group-item-heading">Masung Corp.</h4>
                </div>

                <div class="list-group-item">
                  <label>Job Title</label>
                  <h4 class="list-group-item-heading">Finance Director (ZCT)</h4>
                </div>

                <div class="list-group-item">
                  <label>Department</label>
                  <h4 class="list-group-item-heading">Finance</h4>
                </div>

                <a class="list-group-item" href="tel://+1 650-555-0055">
                  <label>Phone</label>
                  <h4 class="list-group-item-heading">+1 650-555-0055</h4>
                </a>

                <a class="list-group-item" href="mailto:Sofia.Acey@masung.com">
                  <label>Email</label>
                  <h4 class="list-group-item-heading">Sofia.Acey@masung.com</h4>
                </a>

              </div>

              <div class="panel-footer">
                <small class="pull-left">Built with Bootcards - Base Card</small>
                <a class="btn btn-link btn-xs pull-right" href="#">
                  Card footer link</a>
                </div>    
              </div>

            </div><!--contact card-->

            <!--rich text card sample-->
            <div class="panel panel-default bootcards-richtext">
                <div class="panel-heading">
                  <h3 class="panel-title">Rich Text Card Heading</h3>
                </div>
                <div class="panel-body">
                  <p class="lead">Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                  <h1>Heading 1</h1>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h5>Heading 5</h5>
                  <h6>Heading 6</h6>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.</p>
                  <ul>
                    <li>Duis cursus dui et turpis gravida sollicitudin.</li>
                    <li>Donec eget mauris feugiat, euismod purus nec, feugiat neque.</li>
                    <li>Nunc erat est, molestie eget magna in, consectetur euismod lorem.</li>
                  </ul>
                  <ol>
                    <li>Sed luctus congue orci quis tempus.</li>
                    <li>Praesent in viverra lorem.</li>
                    <li>Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.</li>
                  </ol>
                  <div>
                    <!-- Standard button -->
                    <button type="button" class="btn btn-default">Default</button>
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn btn-primary">Primary</button>
                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">Success</button>
                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">Info</button>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">Warning</button>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">Danger</button>
                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">Link</button>
                    <button type="button" class="btn btn-primary" disabled="disabled">Disabled</button>
                  </div>
                </div>
                <div class="panel-footer">
                  <small>Built with Bootcards - Rich Text Card</small>
                </div>
              </div><!--end rich text card-->

        </div><!--list-details-->

    </div><!--row-->


  </div><!--container-->

  <!-- fixed tabbed footer -->
  <div class="navbar navbar-default navbar-fixed-bottom">

    <div class="container">

      <div class="bootcards-desktop-footer clearfix">
        <p class="pull-left">Bootcards</p>
      </div>

      <div class="btn-group">
        <a href="#" class="btn btn-default">
          <i class="fa fa-2x fa-dashboard"></i>Dashboard
        </a>
        <a href="starter-template.html" class="btn btn-default active">
          <i class="fa fa-2x fa-users"></i>Contacts
        </a>
        <a href="az-picker.html" class="btn btn-default">
          <i class="fa fa-2x fa-font"></i>AZ Picker
        </a>
      </div>
    </div>

  </div><!--footer-->

  <!--edit contact modal-->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <form class="form-horizontal" method="POST" action="/contacts/{{contact.id}}" data-pjax="#main">
        
        <div class="modal-header">

          <div class="btn-group pull-left">
            <button class="btn btn-danger" data-dismiss="modal">
              Cancel
            </button>
          </div>
        
          <div class="btn-group pull-right">
            <button class="btn btn-success" data-dismiss="modal">
              <i class="fa fa-check"></i>Save
            </button>
          </div>

          <h4 class="modal-title">
              Edit Contact
          </h4>   
        </div>  

        <div class="modal-body">
            <input type="hidden" name="companyId" value="{{contact.companyId}}">
            <input type="hidden" name="_method" value="put">
            <div class="form-group">
              <label class="col-xs-4 control-label">First Name</label>
              <div class="col-xs-8">
                <input type="text" name="firstName" class="form-control" placeholder="First Name"
                value="Sofia">
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Last Name</label>
              <div class="col-xs-8">
                <input type="text" name="lastName" class="form-control" placeholder="Last Name"
                value="Acey">
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Company</label>
              <div class="col-xs-8">
                <input type="text" name="department" class="form-control" placeholder="Department"
                  value="Masung Corp.">
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Phone</label>
              <div class="col-xs-8">
                <input type="text" name="phone" class="form-control" 
                placeholder="Phone"
                value="+1 650-555-0055">
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Email</label>
              <div class="col-xs-8">
                <input type="email" name="email" class="form-control" placeholder="Email"
                value="Sofia.Acey@masung.com">
              </div>
            </div>
                  
        </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger btn-block"
            onclick="bootcards.confirmDelete('contact'); return false;">
            <i class="fa fa-trash-o"></i>
            Delete Contact
          </button>   
        </div>

      </div><!--modal-content-->
    </div>
  </div><!--modal-->

    <!-- Bootstrap & jQuery core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- Bootcards JS -->
    <script src="../src/js/bootcards.js"></script>

    <!--recommended: FTLabs FastClick library-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>

    <script type="text/javascript">

      /*
       * Initialize Bootcards.
       * 
       * Parameters:
       * - offCanvasBackdrop (boolean): show a backdrop when the offcanvas is shown
       * - offCanvasHideOnMainClick (boolean): hide the offcanvas menu on clicking outside the off canvas
       * - enableTabletPortraitMode (boolean): enable single pane mode for tablets in portraitmode
       * - disableRubberBanding (boolean): disable the iOS rubber banding effect
       * - disableBreakoutSelector (boolean) : for iOS apps that are added to the home screen:
                            jQuery selector to target links for which a fix should be added to not
                            allow those links to break out of fullscreen mode.
       */
      bootcards.init( {
        offCanvasBackdrop : true,
        offCanvasHideOnMainClick : true,
        enableTabletPortraitMode : true,
        disableRubberBanding : true 
      });

      //enable FastClick
      window.addEventListener('load', function() {
          FastClick.attach(document.body);
      }, false);

    </script>
  </body>
</html>
